export const ground_num = [
    0, 1, 4, 8, 12, 15, 20, 30, 32, 48
]

const forMate_pd_mg = (data, style) =>{
    let style_array = [];
    data.forEach(item =>{
        let obj = {
            Class:`${style.className}-${item}`,
            Properties:`${style.Properties}:${style.isF ? '-' : ''}${item}px;${style.Properties_one ? style.Properties_one + ':' + (style.isF ? '-' : '') + item+'px;' : '' }`
        }
        style_array.push(obj);
    })
    return style_array;
}

// 生成 css 数据
export const formatCss = (data) =>{
    let cssStr = "";
    let datas = data;
    datas.forEach(item =>{
        cssStr += `.${item.Class} {${item.Properties}}`; 
    })
    return;
    console.log("cssStr ==>", cssStr);
}

// pd 值
export const pd_table_style = () =>{
    let table_data = [];

    ground_num.forEach(item =>{
        let obj = {
            Class:`p-${item}`,
            Properties:`padding:${item}px;`
        }
        table_data.push(obj);
    })

    ground_num.forEach(item =>{
        let obj = {
            Class:`px-${item}`,
            Properties:`padding-left: ${item}px;
            padding-right: ${item}px;`
        }
        table_data.push(obj);
    })

    ground_num.forEach(item =>{
        let obj = {
            Class:`py-${item}`,
            Properties:`padding-top: ${item}px;
            padding-bottom: ${item}px;`
        }
        table_data.push(obj);
    })

    ground_num.forEach(item =>{
        let obj = {
            Class:`pt-${item}`,
            Properties:`padding-top: ${item}px;`
        }
        table_data.push(obj);
    })

    ground_num.forEach(item =>{
        let obj = {
            Class:`pr-${item}`,
            Properties:`padding-right: ${item}px;`
        }
        table_data.push(obj);
    })

    ground_num.forEach(item =>{
        let obj = {
            Class:`pb-${item}`,
            Properties:`padding-bottom: ${item}px;`
        }
        table_data.push(obj);
    })

    ground_num.forEach(item =>{
        let obj = {
            Class:`pl-${item}`,
            Properties:`padding-left: ${item}px;`
        }
        table_data.push(obj);
    })
    // formatCss(table_data);
    return table_data;
}

// mg 值
export const mg_table_style = () =>{
    let table_data = [];
    
    let table_class = [
        {
            className:"m",
            Properties:"margin"
        },
        {
            isF:true,
            className:"-m",
            Properties:"margin"
        },
        {
            className:"mx",
            Properties:"margin-left",
            Properties_one:"margin-right"
        },
        {
            isF:true,
            className:"-mx",
            Properties:"margin-left",
            Properties_one:"margin-right"
        },
        {
            className:"my",
            Properties:"margin-top",
            Properties_one:"margin-bottom"
        },
        {
            isF:true,
            className:"-my",
            Properties:"margin-top",
            Properties_one:"margin-bottom"
        },
        {
            className:"mt",
            Properties:"margin-top",
        },
        {
            isF:true,
            className:"-mt",
            Properties:"margin-top",
        },
        {
            className:"mr",
            Properties:"margin-right",
        },
        {
            isF:true,
            className:"-mr",
            Properties:"margin-right",
        },
        {
            className:"mb",
            Properties:"margin-bottom",
        },
        {
            isF:true,
            className:"-mb",
            Properties:"margin-bottom",
        },
        {
            className:"ml",
            Properties:"margin-left",
        },
        {
            isF:true,
            className:"-ml",
            Properties:"margin-left",
        },
    ]

    table_class.forEach(item =>{
        let m = forMate_pd_mg(ground_num, item);
        table_data = table_data.concat(m);
    })

    // formatCss(table_data);
    return table_data;
}

// w宽度
export const w_table_style = () =>{
    console.log("1111")
    let w_info = [
        {
            Class:"w-0",
            Properties:"width: 0px;"
        },
        {
            Class:"w-px",
            Properties:"width: 1px;"
        },
        {
            Class:"w-auto",
            Properties:"width: auto;"
        },
        {
            Class:"w-1-5",
            Properties:"width: 20%;"
        },
        {
            Class:"w-1-4",
            Properties:"width: 25%;"
        },
        {
            Class:"w-2-5",
            Properties:"width: 40%;"
        },
        {
            Class:"w-1-2",
            Properties:"width: 50%;"
        },
        {
            Class:"w-3-5",
            Properties:"width: 60%;"
        },
        {
            Class:"w-3-4",
            Properties:"width: 75%;"
        },
        {
            Class:"w-4-5",
            Properties:"width: 80%;"
        },
        {
            Class:"w-full",
            Properties:"width: 100%;"
        },
        {
            Class:"w-screen",
            Properties:"width: 100vw;"
        },
        {
            Class:"w-min",
            Properties:"width: min-content;"
        },
        {
            Class:"w-max",
            Properties:"width: max-content;"
        },
    ]
    // formatCss(w_info);
    return w_info;
}

// flex 何止
export const flex_css = () =>{
    let array = [
        {
            Class: `flex-row`,
            Properties: `flex-direction: row;`
        },
        {
            Class: `flex-row-reverse`,
            Properties: `flex-direction: row-reverse;`
        },
        {
            Class: `flex-col`,
            Properties: `flex-direction: column;`
        },
        {
            Class: `flex-col-reverse`,
            Properties: `flex-direction: column-reverse;`
        },
        {
            Class: `flex-wrap`,
            Properties: `flex-wrap: wrap;`
        },
        {
            Class: `flex-wrap-reverse`,
            Properties: `flex-wrap: wrap-reverse;`
        },
        {
            Class: `flex-nowrap`,
            Properties: `flex-wrap: nowrap;`
        },
        {
            Class: `flex-center`,
            Properties: `justify-content:center;align-items:center;`
        }
    ]
    return array;
}

// 合并css
export const concatArray = () =>{
    let array = [];
    array = array.concat(pd_table_style(), mg_table_style(), w_table_style(), flex_css());

    let cssStr = "";
    array.forEach(item =>{
        cssStr += `.${item.Class} {${item.Properties}}`; 
    })
    console.log("cssStr ==>", cssStr);
}